<template>
  <div class="dom-node">
    <div class="name-line">
      <div style="display: flex; align-items: center">
        <div style="font-size: 18px" :contenteditable="changeName">
          {{ modelName }}
        </div>
        <i
          v-if="!changeName && actionTag !== 'view'"
          class="el-icon-edit-outline"
          @click="changeName = true"
        ></i>
        <i
          v-if="changeName"
          class="el-icon-circle-check"
          @click="changeName = false"
        ></i>
      </div>
      <div class="action-group">
        <el-upload
          v-if="actionTag !== 'view'"
          action="1"
          style="width: 60px; height: 50px; overflow: hidden"
        >
          <span class="group-btn"
            ><i class="el-icon-upload2"></i><span>导入</span></span
          >
        </el-upload>
        <span class="group-btn" @click="daochu">
          <i class="el-icon-download"></i><span>导出</span></span
        >
        <span class="group-btn" @click="tuodong"
          ><i class="el-icon-thumb"></i><span>拖动</span></span
        >
        <span class="group-btn" v-if="!islianxian" @click="lianxian"
          ><i class="el-icon-minus"></i> <span>连线</span></span
        >
        <span class="group-btn" v-else @click="lianxian">
          <i style="color: #409eff" class="el-icon-minus"></i>
          <span style="color: #409eff">连线</span></span
        >
        <span class="group-btn" @click="kuangxuan">
          <!-- <el-tooltip
            class="item"
            effect="dark"
            content="Ctrl+鼠标拖动框选"
            placement="top"
          > -->
          <span class="group-btn">
            <i class="el-icon-full-screen"></i><span>框选</span></span
          >
          <!-- </el-tooltip> -->
        </span>
        <span
          class="group-btn"
          v-if="actionTag !== 'view'"
          draggable
          @dragstart="handleDragstart"
          @dragend="handleDragEnd"
          ><i class="el-icon-circle-plus-outline"></i><span>节点</span></span
        >
        <span class="group-btn" @click="fabu" v-if="actionTag !== 'view'"
          ><i class="el-icon-position"></i><span>发布</span></span
        >
      </div>
      <el-button type="primary" class="back-btn" @click="back">返回</el-button>
    </div>
    <div class="model-main">
      <div class="left-node" id="nodeDom" ref="nodeDom"></div>
      <div class="right-tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="名称">
                <el-input
                  v-model="form.tableName"
                  :disabled="actionTag == 'view'"
                ></el-input>
              </el-form-item>
              <el-form-item label="编码">
                <el-input
                  v-model="form.code"
                  :disabled="actionTag == 'view'"
                ></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input
                  type="textarea"
                  :rows="2"
                  :disabled="actionTag == 'view'"
                  placeholder="请输入内容"
                  v-model="form.textarea"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  v-if="actionTag !== 'view'"
                  @click="baocun"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="结构信息" name="second">
            <el-table
              :data="jiegouTable"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" v-if="selectState">
              </el-table-column>
              <el-table-column prop="fieldName" label="名称">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">
                      {{ scope.row.fieldName }}
                    </p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.fieldName"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="编码">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.code }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.code"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="数据类型">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.type }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.type"
                    ></el-input>
                  </div> </template
              ></el-table-column>
              <el-table-column prop="length" label="长度">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.length }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.length"
                    ></el-input>
                  </div> </template
              ></el-table-column>
              <el-table-column prop="jingdu" label="精度">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.jingdu }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.jingdu"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="default" label="默认值">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.default }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.default"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="可空">
                <template slot-scope="scope">
                  <el-checkbox-group v-model="scope.row.emptyAble">
                    <el-checkbox
                      label=""
                      name="type"
                      :disabled="!scope.row.isEdit"
                    ></el-checkbox>
                  </el-checkbox-group>
                </template>
              </el-table-column>
              <el-table-column prop="desc" label="描述">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.desc }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.desc"
                    ></el-input>
                  </div> </template
              ></el-table-column>
              <el-table-column
                label="操作"
                width="100"
                v-if="actionTag !== 'view'"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="!scope.row.isEdit"
                    @click="edit(scope.row)"
                    type="text"
                    size="small"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-if="scope.row.isEdit"
                    @click="baocunrow(scope.row)"
                    type="text"
                    size="small"
                  >
                    保存
                  </el-button>
                  <el-button @click="del(scope.row)" type="text" size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="外键信息" name="third">
            <el-table :data="foreignKeyTable" style="width: 100%">
              <el-table-column label="外键名称" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.foreignKey"
                    placeholder="请输入外键名称"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="字段" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.field"
                    placeholder="请输入字段"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="被参考表">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.beiCankao"
                    placeholder="请输入被参考表"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.cankaoField"
                    placeholder="请输入参考字段"
                  ></el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick1(scope.row)"
                    type="text"
                    size="small"
                    >查看</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="right-top-btn" v-if="actionTag !== 'view'">
          <el-button
            type="primary"
            size="small"
            v-if="activeName == 'second'"
            :disabled="!jiegouTable.length"
            @click="xinzeng"
          >
            新增
          </el-button>
          <el-button
            type="danger"
            size="small"
            v-if="!selectState && activeName == 'second'"
            :disabled="!jiegouTable.length"
            @click="qiehuanxuenze"
          >
            批量删除
          </el-button>
          <el-button
            type="danger"
            size="small"
            v-if="selectState && activeName == 'second'"
            @click="buxuanze"
            >删除</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
let data1 = {
  nodes: [
    {
      id: "node2",
      label: "node2",
      tableName: "一个节点",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id1",
          code: "unicode",
          type: "number",
          length: "10",
          jingdu: "3",
          default: "id",
          emptyAble: false,
          desc: "列字段的描述",
          isEdit: false,
        },
        {
          fieldName: "name",
          code: "unicode",
          type: "varchar",
          length: "20",
          jingdu: "3",
          default: "name",
          emptyAble: true,
          desc: "列字段的描ffdsa述",
          isEdit: false,
        },
        {
          fieldName: "sc",
          code: "unicode",
          type: "varchar",
          length: "50",
          jingdu: "2",
          default: "sc",
          emptyAble: false,
          desc: "列字段的描述aaaaa",
          isEdit: false,
        },
      ],
    },
  ],
};
let data2 = {
  nodes: [
    {
      id: "node1",
      label: "node1",
      tableName: "333",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id",
          code: "unicode",
          type: "number",
          length: "32",
          jingdu: "2",
          default: "key",
          emptyAble: true,
          desc: "描述东西",
          isEdit: false,
        },
      ],
    },
    {
      id: "node2",
      label: "node2",
      tableName: "123",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id1",
          code: "unicode",
          type: "number",
          length: "10",
          jingdu: "3",
          default: "id",
          emptyAble: false,
          desc: "列字段的描述",
          isEdit: false,
        },
        {
          fieldName: "name",
          code: "unicode",
          type: "varchar",
          length: "20",
          jingdu: "3",
          default: "name",
          emptyAble: true,
          desc: "列字段的描ffdsa述",
          isEdit: false,
        },
        {
          fieldName: "sc",
          code: "unicode",
          type: "varchar",
          length: "50",
          jingdu: "2",
          default: "sc",
          emptyAble: false,
          desc: "列字段的描述aaaaa",
          isEdit: false,
        },
      ],
    },
  ],
  edges: [
    {
      source: "node1",
      target: "node2",
    },
  ],
};
let data3 = {
  nodes: [
    {
      id: "node1",
      label: "node1",
      tableName: "三个节点第一",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id",
          code: "unicode",
          type: "number",
          length: "32",
          jingdu: "2",
          default: "key",
          emptyAble: true,
          desc: "描述东西",
          isEdit: false,
        },
      ],
    },
    {
      id: "node2",
      label: "node2",
      tableName: "三个节点第2",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id1",
          code: "unicode",
          type: "number",
          length: "10",
          jingdu: "3",
          default: "id",
          emptyAble: false,
          desc: "列字段的描述",
          isEdit: false,
        },
        {
          fieldName: "name",
          code: "unicode",
          type: "varchar",
          length: "20",
          jingdu: "3",
          default: "name",
          emptyAble: true,
          desc: "列字段的描ffdsa述",
          isEdit: false,
        },
        {
          fieldName: "sc",
          code: "unicode",
          type: "varchar",
          length: "50",
          jingdu: "2",
          default: "sc",
          emptyAble: false,
          desc: "列字段的描述aaaaa",
          isEdit: false,
        },
      ],
    },
    {
      id: "node3",
      label: "node3",
      tableName: "三个节点第333",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id1",
          code: "unicode",
          type: "number",
          length: "10",
          jingdu: "3",
          default: "id",
          emptyAble: false,
          desc: "列字段的描述",
          isEdit: false,
        },
        {
          fieldName: "sc",
          code: "unicode",
          type: "varchar",
          length: "50",
          jingdu: "2",
          default: "sc",
          emptyAble: false,
          desc: "列字段的描述aaaaa",
          isEdit: false,
        },
      ],
    },
  ],
  edges: [
    {
      source: "node1",
      target: "node2",
    },
  ],
};
let data4 = {
  nodes: [
    {
      id: "node1",
      label: "node1",
      tableName: "4个节点第一",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id",
          code: "unicode",
          type: "number",
          length: "32",
          jingdu: "2",
          default: "key",
          emptyAble: true,
          desc: "描述东西",
          isEdit: false,
        },
      ],
    },
    {
      id: "node2",
      label: "node2",
      tableName: "4个节点第2",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id1",
          code: "unicode",
          type: "number",
          length: "10",
          jingdu: "3",
          default: "id",
          emptyAble: false,
          desc: "列字段的描述",
          isEdit: false,
        },
        {
          fieldName: "name",
          code: "unicode",
          type: "varchar",
          length: "20",
          jingdu: "3",
          default: "name",
          emptyAble: true,
          desc: "列字段的描ffdsa述",
          isEdit: false,
        },
        {
          fieldName: "sc",
          code: "unicode",
          type: "varchar",
          length: "50",
          jingdu: "2",
          default: "sc",
          emptyAble: false,
          desc: "列字段的描述aaaaa",
          isEdit: false,
        },
      ],
    },
    {
      id: "node3",
      label: "node3",
      tableName: "4个节点第333",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id1",
          code: "unicode",
          type: "number",
          length: "10",
          jingdu: "3",
          default: "id",
          emptyAble: false,
          desc: "列字段的描述",
          isEdit: false,
        },
        {
          fieldName: "sc",
          code: "unicode",
          type: "varchar",
          length: "50",
          jingdu: "2",
          default: "sc",
          emptyAble: false,
          desc: "列字段的描述aaaaa",
          isEdit: false,
        },
      ],
    },
    {
      id: "node4",
      label: "node4",
      tableName: "si个节点第4",
      code: "unicode",
      textarea: "优秀班级学员成绩统计",
      columns: [
        {
          fieldName: "id1",
          code: "unicode",
          type: "number",
          length: "10",
          jingdu: "3",
          default: "id",
          emptyAble: false,
          desc: "列字段的描述",
          isEdit: false,
        },
        {
          fieldName: "sc",
          code: "unicode",
          type: "varchar",
          length: "50",
          jingdu: "2",
          default: "sc",
          emptyAble: false,
          desc: "列字段的描述aaaaa",
          isEdit: false,
        },
      ],
    },
  ],
  edges: [
    {
      source: "node1",
      target: "node2",
    },
    {
      source: "node3",
      target: "node4",
    },
  ],
};
let columns = [
  {
    fieldName: "",
    code: "",
    type: "",
    length: "",
    jingdu: "",
    default: "",
    emptyAble: "",
    desc: "",
    isEdit: false,
  },
];
export default {
  props: ["dataNum", "actionTag"],
  data() {
    return {
      edges: [],
      offsetX: 0,
      offsetY: 0,
      selectState: false,
      modelName: "未命名数据模型",
      changeName: false,
      activeName: "first",
      form: {
        tableName: "",
        code: "",
        textarea: "",
      },
      jiegouTable: [],
      foreignKeyTable: [
        {
          foreignKey: "表关联",
          field: "id",
          beiCankao: "123",
          cankaoField: "id1",
        },
      ],
      data: {
        nodes: [
          {
            id: "node1",
            label: "node1",
            tableName: "333",
            code: "unicode",
            textarea: "优秀班级学员成绩统计",
            columns: [
              {
                fieldName: "id",
                code: "unicode",
                type: "number",
                length: "32",
                jingdu: "2",
                default: "key",
                emptyAble: true,
                desc: "描述东西",
                isEdit: false,
              },
            ],
          },
          {
            id: "node2",
            label: "node2",
            tableName: "123",
            code: "unicode",
            textarea: "优秀班级学员成绩统计",
            columns: [
              {
                fieldName: "id1",
                code: "unicode",
                type: "number",
                length: "10",
                jingdu: "3",
                default: "id",
                emptyAble: false,
                desc: "列字段的描述",
                isEdit: false,
              },
              {
                fieldName: "name",
                code: "unicode",
                type: "varchar",
                length: "20",
                jingdu: "3",
                default: "name",
                emptyAble: true,
                desc: "列字段的描ffdsa述",
                isEdit: false,
              },
              {
                fieldName: "sc",
                code: "unicode",
                type: "varchar",
                length: "50",
                jingdu: "2",
                default: "sc",
                emptyAble: false,
                desc: "列字段的描述aaaaa",
                isEdit: false,
              },
            ],
          },
        ],
        edges: [
          {
            source: "node1",
            target: "node2",
          },
        ],
      },
      firstNodeItem: null,
      islianxian: false,
    };
  },
  beforeDestroy() {
    this.edges = [];
  },
  created() {
    if (this.dataNum == "1") {
      this.data = data1;
    } else if (this.dataNum == "2") {
      this.data = data2;
    } else if (this.dataNum == "3") {
      this.data = data3;
    } else {
      this.data = data4;
    }
  },
  mounted() {
    let that = this;
    G6.registerNode(
      "customNode",
      {
        options: {
          stateStyles: {
            selected: {
              fill: "red",
            },
          },
        },
        afterDraw(cfg, group) {
          const size = cfg.size;
          const width = size[0];
          const height = size[1];

          group.addShape("rect", {
            attrs: {
              x: -width / 2, // 左右
              y: height / 2, // 上下
              width: width,
              height: 20 + cfg.columns.length * 20 + 20,
              fill: "#0077bb",
              radius: [0, 0, 5, 5], // 左上 右上 右下 左下
            },
            draggable: true,
            name: "根据列名的长度延申背景",
          });
          group.addShape("text", {
            attrs: {
              x: 0, // 左右 0 是中间
              y: 2, // 上下
              textBaseline: "top",
              textAlign: "center",
              lineHeight: 20,
              height: 20,
              text: cfg.tableName,
              fill: "#fff",
            },
            draggable: true, // 图形可拖拽
            name: "表名",
          });
          for (let i = 0; i < cfg.columns.length; i++) {
            group.addShape("rect", {
              attrs: {
                x: -width / 2 + 5, // 左右
                y: 22 + i * 20, // 上下
                width: 240,
                height: 20,
                fill: "#fff",
              },
              draggable: true,
              name: "列名的白色背景",
            });
            group.addShape("text", {
              attrs: {
                x: -width / 2 + 30, // 左右
                y: 22 + i * 20, // 上下
                textBaseline: "top",
                lineHeight: 20,
                height: 20,
                text: cfg.columns[i].fieldName,
                fill: "#555",
              },
              draggable: true, // 图形可拖拽
              name: "列名",
            });
          }
        },
      },
      "rect"
    );
    const width = document.getElementById("nodeDom").clientWidth;
    const height = document.getElementById("nodeDom").offsetHeight;
    this.graph = new G6.Graph({
      container: "nodeDom",
      width,
      height,
      modes: {
        default: [
          "drag-canvas", // 允许拖拽画布
          "zoom-canvas", //缩放画布
          "drag-node", //拖拽节点
          {
            type: "click-select",
            trigger: "ctrl",
          },
          {
            type: "brush-select",
            trigger: "ctrl",
            includeEdges: false,
          },
        ],
      },
      defaultNode: {
        type: "customNode",
        size: [250, 2],
        style: {
          stroke: "#0077bb",
          lineWidth: 0,
          fill: "#0077bb",
          radius: [0, 0, 0, 0], // 左上 右上 右下 左下
        },
        labelCfg: {
          position: "bottom",
          offset: 8,
          style: {
            fill: "#0077bb",
            fontSize: 12,
          },
        },
      },
      defaultEdge: {
        style: {
          stroke: "#0077bb",
          lineWidth: 0.8,
          endArrow: {
            path: G6.Arrow.triangle(),
            fill: "#0077bb",
          },
        },
      },
      nodeStateStyles: {
        // node style of active state
        active: {
          fillOpacity: 0.8,
        },
        // node style of selected state
        selected: {
          shadowOffsetX: 0,
          shadowOffsetY: 15,
          shadowColor: "#409EFF",
          shadowBlur: 50,
          opacity: 0.8,
          height:50,
           fill: '#409EFF',
        },
      },
    });
    this.graph.zoomTo(1);
    this.graph.on("node:click", (ev) => {
      const { item } = ev;
      that.graph.setItemState(item, "selected", true);
      if (!this.islianxian) {
        let node = ev.item._cfg;
        console.log(node);
        that.jiegouTable = ev.item._cfg.model.columns;
        that.form = ev.item._cfg.model;
        // this.graph.updateItem(node, {
        //   // 节点的样式
        //   style: {
        //     stroke: "red",
        //   },
        // });
      } else {
        const node = ev.item;
        if (!this.firstNodeItem) {
          this.firstNodeItem = ev.item._cfg.id;
        }
        // 鼠标当前点击的节点的位置
        const point = { x: ev.x, y: ev.y };
        const model = node.getModel();
        console.log(this.firstNodeItem);
        if (this.addingEdge && this.edge) {
          if (this.firstNodeItem != node._cfg.id) {
            this.graph.updateItem(this.edge, {
              target: model.id,
            });
            let obj = {
              source: this.firstNodeItem,
              target: node._cfg.id,
            };
            this.edges.push(obj);
            this.data.edges = this.edges;
          } else {
            this.graph.removeItem(this.edge);
          }
          this.firstNodeItem = null;
          this.edge = null;
          this.addingEdge = false;
        } else {
          // 在图上新增一条边，结束点是鼠标当前点击的节点的位置
          this.edge = this.graph.addItem("edge", {
            source: model.id,
            target: point,
          });
          this.addingEdge = true;
        }
      }
    });
    this.graph.on("mousemove", (ev) => {
      if (this.islianxian) {
        // 鼠标的当前位置
        const point = { x: ev.x, y: ev.y };
        if (this.addingEdge && this.edge) {
          // 更新边的结束点位置为当前鼠标位置
          this.graph.updateItem(this.edge, {
            target: point,
          });
        }
      }
    });
    this.graph.on("edge:click", (ev) => {
      if (this.islianxian) {
        const currentEdge = ev.item;
        this.firstNodeItem = null;
        // 拖拽过程中，点击会点击到新增的边上
        if (this.addingEdge && this.edge == currentEdge) {
          this.graph.removeItem(this.edge);
          this.edge = null;
          this.addingEdge = false;
        }
      }
    });

    if (this.actionTag === "add") {
      this.data = { nodes: [] };
      this.graph.read(this.data);
    } else if (this.actionTag === "edit" || this.actionTag === "view") {
      this.graph.read(this.data);
    }
  },
  methods: {
    handleClick() {},
    handleSelectionChange(a, b, c) {
      console.log(a, b, c);
    },
    edit(row) {
      row.isEdit = true;
    },
    lianxian() {
      this.islianxian = !this.islianxian;
    },
    xinzeng() {
      this.jiegouTable.push({
        fieldName: "",
        code: "",
        type: "",
        length: "",
        jingdu: "",
        default: "",
        emptyAble: "",
        desc: "",
        isEdit: true,
      });
    },
    qiehuanxuenze() {
      this.selectState = true;
    },
    buxuanze() {
      this.$alert("确定删除吗？", "确认框", {
        confirmButtonText: "确定",
        callback: (action) => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0,0,0,0.7)",
          });
          let timmer = setTimeout(() => {
            loading.close();
            this.selectState = false;
            this.$message({
              message: "删除成功",
              type: "success",
            });
            clearTimeout(timmer);
          }, 600);
        },
      });
    },
    del() {
      this.$alert("确定删除此行吗？", "确认框", {
        confirmButtonText: "确定",
        callback: (action) => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0,0,0,0.7)",
          });
          let timmer = setTimeout(() => {
            loading.close();
            this.$message({
              message: "删除成功",
              type: "success",
            });
            clearTimeout(timmer);
          }, 600);
        },
      });
    },
    handleClick1() {},
    daochu() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0,0,0,0.7)",
      });
      let timmer = setTimeout(() => {
        loading.close();
        this.$message({
          message: "导出成功",
          type: "success",
        });
        clearTimeout(timmer);
      }, 600);
    },
    tuodong() {},
    kuangxuan() {},
    baocun() {
      console.log(this.data);
      this.graph.render(this.data);
    },
    baocunrow(row) {
      row.isEdit = false;
      this.graph.render(this.data);
    },
    handleDragstart(e) {
      this.offsetX = e.offsetX;
      this.offsetY = e.offsetY;
    },
    handleDragEnd(e) {
      let canvas = this.$refs.nodeDom.getElementsByTagName("canvas")[0];
      let ctx = canvas.getContext("2d");
      let jiange = canvas.getBoundingClientRect();
      ctx.rect(0, 0, canvas.width, canvas.height);
      if (ctx.isPointInPath(e.clientX - jiange.left, e.clientY - jiange.top)) {
        var code = "";
        for (var i = 0; i < 2; i++) {
          var radom = Math.floor(Math.random() * 10);
          code += radom;
        }
        console.log(e.x, e.y);
        // 将屏幕/页面坐标转换为渲染坐标
        const xy = this.graph.getPointByClient(e.x, e.y);
        let model = {
          id: code,
          label: code,
          tableName: "",
          code: "",
          textarea: "",
          columns: [
            {
              fieldName: "",
              code: "",
              type: "",
              length: "",
              jingdu: "",
              default: "",
              emptyAble: true,
              desc: "",
              isEdit: false,
            },
          ],
          x: xy.x,
          y: xy.y,
          offsetX: this.offsetX,
          offsetY: this.offsetY,
        };
        this.data.nodes.push(model);
        console.log(this.data);
        this.graph.addItem("node", model);
        this.graph.fitView = true;
      }
    },
    jiedian() {
      let rand = Math.random();
      let newNode = {
        id: "node" + rand,
        label: "node" + rand,
        tableName: "",
        code: "",
        textarea: "",
        columns,
      };
      this.jiegouTable = columns;
      this.form = newNode;
      this.data.nodes.push(newNode);
      this.graph.render(this.data);
    },
    back() {
      this.$emit("fn", false);
    },
    fabu() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0,0,0,0.7)",
      });
      let timmer = setTimeout(() => {
        loading.close();
        this.$message({
          message: "发布成功",
          type: "success",
        });
        clearTimeout(timmer);
        this.$emit("fn", false);
      }, 600);
    },
  },
};
</script>

<style lang="less">
.name-line {
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  background-color: #e7f0fb;
  display: flex;
  align-items: center;
  position: relative;
  // justify-content: space-between;
  .action-group {
    display: flex;
    margin-left: 50px;
    .el-upload {
      display: block;
    }
    .group-btn {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 50px;
      width: 60px;
      font-size: 14px;
      text-align: center;
      line-height: 25px;
      i {
        height: 25px;
        width: 28px;
        font-size: 24px;
      }
    }
  }
  .back-btn {
    position: absolute;
    right: 20px;
    // margin-left: 400px;
  }
}
.model-main {
  display: flex;
  justify-content: space-between;
  height: 80vh;
  padding: 10px;
  box-sizing: border-box;
  .left-node {
    width: 50%;
    height: 100%;
  }
  .right-tabs {
    width: 50%;
    position: relative;
    padding: 10px;
    border-left: 1px solid #b9bfc6;
    .right-top-btn {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>
